<template>
	<view class="box bg-f7 ">
		<view v-if="info.status ==1">
			<view class="info-title" v-if="this.countdown > 0">
				剩余支付时间 <text>{{payTime}}</text>
			</view>
			<view v-else>

			</view>
		</view>

		<view v-if='tips' class="fs-28 color-4d" style="line-height: 70rpx;">
			{{tips}}
		</view>
		<view class="padding-l-r-30">
			<view class="bg-white address-box align-items-center border-radio-14 padding-20 margin-b-20">
				<view class="flex-1">
					<view class="fs-30 color-0 fw-b">
						{{userInfo.area}}{{userInfo.address}}
					</view>
					<view class="phone-box margin-t-20">
						<text style="margin-right: 50rpx;">{{userInfo.name}}</text>
						<text>{{userInfo.mobile}}</text>
					</view>
				</view>
				<!-- <view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view> -->
			</view>
			<view class="bg-white padding-l-r-20 margin-b-20 border-radio-14">
				<view class="flex-box padding-t-b-20">
					<view class="img-box" v-if="info.goods  && info.goods.image" @click="goGoods ">
						<image :src="info.goods.image" mode="aspectFill"></image>
					</view>
					<view class="info-address flex-column justifyContent-spaceBetween flex-1">
						<view class="fs-30 color-0 fw-b only-2">
							{{info.goods?info.goods.title :''}}
						</view>
						<view class="fs-28 color-0 justifyContent-spaceBetween">
							￥{{info.goods?info.goods.price:0}}
							<text class="color-333">x{{info.count}}</text>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="justifyContent-spaceBetween padding-t-b-20 notes-box">
					备注
					<text>{{info.remark|| '暂无备注'}}</text>
				</view>
			</view>
			<view class="bg-white padding-20  border-radio-14 fs-28 margin-b-20">
				<view class="justifyContent-spaceBetween align-items-center margin-b-20 color-4d ">
					<text class="flex-1">商品金额</text>
					<view class="color-0">￥{{(info.count * Number(info.goods?info.goods.price :0)).toFixed(2)}}</view>
				</view>
				<view class="justifyContent-spaceBetween align-items-center color-4d ">
					<text class="flex-1">优惠券</text>
					<view class="color-80">{{info.coupon_money || '暂无优惠券'}}</view>
					<view>
						<u-icon name="arrow-right" color="#999"></u-icon>
					</view>
				</view>
				<view class="justifyContent-spaceBetween align-items-center" style="margin-top: 48rpx;">
					<text class="flex-1"> </text>
					<view>合计：</view>
					<view class="color-0 fw-b">￥{{info.order_amount_total}}</view>
				</view>
			</view>
			<view class="bg-white padding-20  border-radio-14 fs-28 ">
				<view class="justifyContent-spaceBetween margin-b-20 color-4d">
					订单编号
					<text class="color-0">{{info.order_no}}</text>
				</view>
				<view class="justifyContent-spaceBetween color-4d margin-b-20">
					下单时间
					<text class="color-0">{{info.createtime}}</text>
				</view>
				<view class="justifyContent-spaceBetween color-4d margin-b-20" v-if="info.pay_time">
					支付时间
					<text class="color-0">{{info.pay_time}}</text>
				</view>
				<view class="justifyContent-spaceBetween margin-b-20 color-4d" v-if="info.delivery_company">
					快递公司
					<text class="color-0">{{info.delivery_company}}</text>
				</view>
				<view class="justifyContent-spaceBetween color-4d margin-b-20" v-if="info.delivery_code">
					快递单号
					<text class="color-0" @click="copeDeliveryCode(info.delivery_code)">{{info.delivery_code}}</text>
				</view>
			</view>
		</view>
		<view class="pay-box bg-white padding-l-r-30">
			<view class="btn-box other color-43 fs-28 margin-r-20" @click.stop="comment" v-if="info.status ==4">评论</view>
			<view class="btn-box color-white fs-28" @click="submitPay" v-if="info.status ==1">立即付款</view>
			<view class="btn-box color-white fs-28" @click="submitPay" v-else>联系客服</view>
		</view>
	</view>
</template>

<script>
	import {
		orderDetail,
		pay,
		payTest
	} from '@/api/order'
	export default {
		data() {
			return {
				info: {
					goods: {
						image: ''
					}
				},
				payTime: '',
				userInfo: {},
				coupon: '',
				tips: '',
				countdown: 600, // 初始倒计时时间，单位为秒
			}
		},
		onLoad(e) {
			this.id = e.id
			this.info = {}
			let tips = '',
				title = '订单详情'
			if (this.info.status == 1) {
				title = '待付款详情'

			} else if (this.info.status == 2) {
				title = '已付款详情'
				tips = '有任何问题可联系客服处理'
			}
			this.getOrderDetail()
			this.tips = tips
			uni.setNavigationBarTitle({
				title
			})
		},
		onShow() {

		},
		methods: {
			getOrderDetail() {
				orderDetail({
					order_id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.userInfo = res.data.address
						let newTime = new Date().getTime()
						let endTime = res.data.end_time * 1000

						if (this.info.end_time && endTime > newTime) {
							this.countdown = Math.round((endTime - newTime) / 1000)
							this.startCountdown()
						} else {
							this.countdown = 0
							this.stopCountdown();
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						let quotient = Math.floor(this.countdown / 60),
							remainder = this.countdown % 60
						this.payTime = ((quotient > 9) ? quotient : '0' + quotient) + ':' + ((remainder > 9) ?
							remainder : '0' + remainder)
						console.log(this.payTime, quotient, remainder);
					} else {
						clearInterval(this.timer); // 倒计时结束，清除定时器
						console.log('倒计时结束');
						// 在这里可以添加倒计时结束后的逻辑，比如重置countdown等
					}
				}, 1000); // 每1000毫秒（1秒）更新一次倒计时
			},
			stopCountdown() {
				clearInterval(this.timer); // 停止倒计时
			},
			copeDeliveryCode(data) {
				uni.setClipboardData({
					data,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					 
				})
			},
			goGoods(){
				uni.navigateTo({
					url:'/pageA/shop/details?id='+this.info.goods.id
				})
			},
			// 立即付款
			submitPay(order_no) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否支付',
					success: function(res) {
						if (res.confirm) {
							payTest({
								order_no: that.info.order_no,
							}).then(res => {
								if (res.code == 1) {
									wx.requestPayment({
										timeStamp: res.data.timeStamp,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										signType: res.data.signType,
										paySign: res.data.paySign,
										success(res) {
											that.$tools.toast('支付成功')
											that.$tools.navigateBack(1, 200)
										},
										fail(res) {
											uni.showToast({
												title: '取消支付',
												icon: 'error',
												duration: 2000,
											})
											that.$tools.navigateBack(1, 200)
										}
									})

								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消支付',
								icon: 'none'
							})
						}
					}
				});
			},
			
			comment(item) {
				uni.navigateTo({
					url: '/pageA/mine/order/comment?id=' + this.id
				})
			}
		},

		beforeDestroy() {
			this.stopCountdown(); // 组件销毁前停止倒计时，防止内存泄漏
		},
	}
</script>

<style lang="scss" scoped>
	.info-title {
		text-align: center;
		line-height: 83rpx;
		font-size: 28rpx;
		color: #4d4d4d;

		text {
			color: #FF0A13;
		}
	}

	.address-box {
		font-size: 30rpx;


	}

	.info-address {}

	.img-box {
		width: 120rpx;
		height: 120rpx;
		min-width: 120rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.notes-box {
		font-size: 28rpx;
		color: #4d4d4d;

		text {
			color: #000;
		}
	}

	.pay-box {
		display: flex;
		justify-content: flex-end;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: 62rpx;

		.btn-box {
			width: 240rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #43ABC4;
			border-radius: 45rpx;
			&.other {
				background: #EFFBFE;
				border: 1px solid #43ABC4;
			}
		}
	}
</style>